<template>
    <view class="activity-stats">
        <uv-navbar title="活动数据统计" autoBack />
        
        <!-- 统计卡片 -->
        <view class="stats-cards">
            <view class="stats-card" v-for="stat in statsData" :key="stat.title">
                <view class="stats-number">{{ stat.value }}</view>
                <view class="stats-title">{{ stat.title }}</view>
                <view class="stats-change" :class="stat.change > 0 ? 'positive' : 'negative'">
                    {{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%
                </view>
            </view>
        </view>
        
        <!-- 图表区域 -->
        <view class="chart-section">
            <lst-title title="参与趋势" bold="bold" />
            <view class="chart-placeholder">
                <uv-text text="📊 图表数据加载中..." size="28rpx" color="#999" />
            </view>
        </view>
        
        <!-- 详细数据 -->
        <view class="detail-section">
            <lst-title title="详细数据" bold="bold" />
            <view class="detail-list">
                <view class="detail-item" v-for="item in detailData" :key="item.date">
                    <view class="detail-date">{{ item.date }}</view>
                    <view class="detail-stats">
                        <view class="detail-stat">
                            <text>访问：{{ item.visits }}</text>
                        </view>
                        <view class="detail-stat">
                            <text>关注：{{ item.follows }}</text>
                        </view>
                        <view class="detail-stat">
                            <text>转化率：{{ item.rate }}%</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const statsData = ref([
    {
        title: '总访问量',
        value: '1,234',
        change: 12.5
    },
    {
        title: '关注人数',
        value: '856',
        change: 8.3
    },
    {
        title: '转化率',
        value: '69.4%',
        change: -2.1
    },
    {
        title: '活跃度',
        value: '85%',
        change: 5.7
    }
])

const detailData = ref([
    {
        date: '2024-01-24',
        visits: 156,
        follows: 108,
        rate: 69.2
    },
    {
        date: '2024-01-23',
        visits: 142,
        follows: 95,
        rate: 66.9
    },
    {
        date: '2024-01-22',
        visits: 178,
        follows: 125,
        rate: 70.2
    }
])

onMounted(() => {
    // 这里可以根据页面参数加载具体活动的数据
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const activityId = currentPage.options.id
    console.log('活动ID:', activityId)
})
</script>

<style lang="scss" scoped>
.activity-stats {
    background: #f5f5f5;
    min-height: 100vh;
}

.stats-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    padding: 40rpx;
    
    .stats-card {
        background: #fff;
        padding: 40rpx;
        border-radius: 20rpx;
        text-align: center;
        box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
        
        .stats-number {
            font-size: 48rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
        }
        
        .stats-title {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 10rpx;
        }
        
        .stats-change {
            font-size: 24rpx;
            
            &.positive {
                color: #52c41a;
            }
            
            &.negative {
                color: #ff4d4f;
            }
        }
    }
}

.chart-section, .detail-section {
    padding: 40rpx;
    
    .chart-placeholder {
        background: #fff;
        height: 400rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
        box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
    }
    
    .detail-list {
        margin-top: 30rpx;
        
        .detail-item {
            background: #fff;
            padding: 30rpx;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
            
            .detail-date {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            .detail-stats {
                display: flex;
                justify-content: space-between;
                
                .detail-stat {
                    font-size: 26rpx;
                    color: #666;
                }
            }
        }
    }
}
</style>